<template>
    <div class="page">
        <AdminTabsP v-model:active="tabActive" :list="tabList" />
        <div class="avatar" @click="onUpdateAvatar">
            <img
                :src="
                    userStore.avatar
                        ? userStore.avatar
                        : `${_oss_}images/user/default-avatar.png`
                "
            />
            <input
                type="file"
                accept="image/*"
                style="display: none"
                @change="onAvatarChange"
                ref="fileInputRef"
            />

            <div class="icon-camera-mask">
                <img :src="`${_oss_}images/admin/icon-camera.png`" />
            </div>
        </div>
        <div class="page-name">个人资料</div>

        <div class="form">
            <div class="form-cell">
                <div class="form-item">
                    <div class="form-label form-required">用户名：</div>
                    <div class="form-content">
                        <el-input type="text" v-model="form.nickname" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label form-required">所属行业：</div>
                    <div class="form-content">
                        <el-cascader
                            v-model="form.industry_id"
                            :options="industryList"
                            :props="{
                                value: 'id',
                                label: 'name',
                                children: 'child',
                            }"
                            style="width: 200px"
                            v-if="industryList.length"
                        ></el-cascader>
                    </div>
                </div>
            </div>

            <div class="form-cell">
                <div class="form-item">
                    <div class="form-label form-required">所在地：</div>
                    <div class="form-content">
                        <el-cascader
                            :options="regionData"
                            :props="{ value: 'label' }"
                            v-model="form.city"
                            style="width: 200px"
                        >
                        </el-cascader>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">&emsp;&emsp;密码：</div>
                    <div class="form-content">
                        <el-button link type="primary" @click="onUpdatePassword"
                            >修改</el-button
                        >
                    </div>
                </div>
            </div>

            <div class="form-cell">
                <div class="form-item">
                    <div class="form-label">手机绑定：</div>
                    <div class="form-content">
                        {{ form.mobile }}
                        <el-button
                            @click="onUpdatePhone"
                            style="margin-left: 10px"
                            link
                            type="primary"
                        >
                            修改
                        </el-button>
                    </div>
                </div>

                <div class="form-item">
                    <div class="form-label form-required">性别：</div>
                    <div class="form-content">
                        <el-radio-group v-model="form.gender">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="0">女</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>

            <div class="form-cell">
                <div class="form-item">
                    <div class="form-label form-required">出生日期：</div>
                    <div class="form-content">
                        <el-date-picker
                            v-model="form.birthday"
                            type="date"
                            class="no-icon"
                            :prefix-icon="false"
                            :clearable="false"
                            placeholder="请选择出生日期"
                            :disabledDate="birthdayDisabled"
                            value-format="YYYY-MM-DD"
                        ></el-date-picker>
                    </div>
                </div>

                <div class="form-item">
                    <div class="form-label">爱好：</div>
                    <div class="form-content">
                        <el-input
                            type="textarea"
                            v-model="form.hobby"
                            :rows="2"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                        />
                    </div>
                </div>
            </div>

            <div class="form-footer">
                <el-button type="primary" @click="onSubmit">修改</el-button>
            </div>
        </div>
    </div>

    <LazyDialogUpdatePhoneP ref="updatePhoneDialogRef" />
    <LazyDialogAvatarCropperP ref="avatarCropperRef" />
    <LazyDialogAvatarSelectP ref="avatarDialogRef" @diy="onDiy" />
</template>
<script setup>
import { useContent } from ".";
import { regionData } from "element-china-area-data";

const tabActive = ref(1);
const tabList = [
    {
        label: "基本资料",
        value: 1,
    },
];
const fileInputRef = ref(null);
const avatarCropperRef = ref(null);
const avatarDialogRef = ref(null);
const userStore = useUserStore();
const {
    form,
    industryList,
    updatePhoneDialogRef,
    birthdayDisabled,
    onGetList,
    onGetUserInfo,
    onSubmit,
    onUpdatePassword,
    onUpdatePhone,
} = useContent();

const onAvatarChange = (e) => {
    const file = e.target.files[0];
    avatarCropperRef.value.show(window.URL.createObjectURL(file), file.name);
    e.target.value = "";
};

const onUpdateAvatar = () => {
    avatarDialogRef.value.show();
};

const onDiy = () => {
    fileInputRef.value.click();
};

onGetList();
onGetUserInfo();
</script>
<style lang="scss" scoped>
.page {
    width: 100%;
    padding: 0 16px;
}

.avatar {
    position: relative;
    margin-top: 20px;
    width: 140px;
    height: 140px;
    margin: 20px auto 0;
    border-radius: 8px;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
    }
}

.page-name {
    margin-top: 51px;
    padding-left: 15px;
}

.form {
    width: 80%;
    margin: 56px auto 0;

    &-required {
        position: relative;

        &::before {
            content: "*";
            color: #ff4941;
            font-weight: bold;
            margin-right: 2px;
        }
    }

    &-cell {
        display: flex;
        margin-bottom: 38px;
    }

    &-item {
        display: flex;
        align-items: center;
        flex: 1;
    }

    &-label {
        width: 80px;
        text-align: right;
        font-size: 14px;
        color: #666;
        margin-right: 20px;
    }

    &-content {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #666;
    }

    &-footer {
        text-align: center;
    }

    :deep(.el-input) {
        width: 200px;
    }

    :deep(.el-textarea) {
        width: 200px;
    }
}

.icon-camera-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba($color: #000000, $alpha: 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    img {
        width: 40px;
        height: 40px;
    }
}

:deep(.no-icon) {
    width: 100%;
    .el-input__prefix {
        display: none !important;
    }
}
</style>
